<template>
    <div>
        <el-row style="margin-top: 20px;">
            <el-image :src="page.rentersInfoImg" style="margin-right: 900px;" width="60px" height="60px"></el-image>
        </el-row>

        <el-upload style="margin-right: 900px;" class="upload-demo" action="#" :http-request="uploadImage"
            :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
            :on-exceed="handleExceed" :file-list="fileList" :on-success="afterUpload">
            <el-button size="small" type="primary">修改头像</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>

        <el-row style="margin-top: 20px;">
            <el-col :span="6">
                <span class="input-label">姓名：</span>
                <el-input placeholder="姓名" v-model="page.rentersInfoName" clearable>
                </el-input>
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
            <el-col :span="6">
                <span class="input-label">身份证：</span>
                <el-input placeholder="身份证" v-model="page.rentersInfoCard" clearable>
                </el-input>
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
            <el-col :span="6">
                <span class="input-label">年龄：</span>
                <el-input placeholder="年龄" v-model="page.rentersInfoAge" clearable>
                </el-input>
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
            <el-col :span="6">
                <span class="input-label">电话：</span>
                <el-input placeholder="电话" v-model="page.rentersInfoPhone" clearable>
                </el-input>
            </el-col>
        </el-row>
        <el-row style="margin-left: -1190px; margin-top: 20px;">
            <el-button type="primary" @click="showdialog">
                修改
            </el-button>
        </el-row>

        <el-row style="margin-left: -1190px; margin-top: 20px;">
            <el-button type="primary" @click="showdialog2">
                修改密码
            </el-button>
        </el-row>

        <el-dialog :visible.sync="dialogVisible" title="修改">
            <el-input v-model="input1" placeholder="请输入电话"></el-input>
            <el-row>
                <el-button type="primary" @click="updateuserinfo">
                    确认修改
                </el-button>
            </el-row>
        </el-dialog>

        <el-dialog :visible.sync="dialogVisible1" title="修改密码">
            <el-input v-model="updatepasss.oldPass" placeholder="请输入旧密码"></el-input>
            <el-input v-model="updatepasss.newPass" placeholder="请输入新密码"></el-input>
            <el-input v-model="newPass2" placeholder="请再次输入新密码确认"></el-input>
            <el-row>
                <el-button type="primary" @click="updatepass">
                    确认修改
                </el-button>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "RentersInfo",
    data() {
        return {
            selectedValue: '', // 用于存储当前选中的值
            options: [], // 用于存储从后端查询的选项数组
            input1: '',
            input2: '',
            dialogVisible: false,
            dialogVisible1: false,
            rentersInfoPhone: "",
            fileList: [],
            page: {},
            newPass2: "",
            updatepasss: {
                oldPass: "",
                newPass: ""
            }
        }
    },
    methods: {
        updatepass() {
            if (this.updatepasss.oldPass === this.updatepasss.newPass) {
                alert("修改密码不能相同");
                this.dialogVisible1 = false
                this.updatepasss.oldPass = ""
                this.updatepasss.newPass = ""
                this.newPass2 = ""
                newPass2 = ""
            }
            if (this.updatepasss.newPass !== this.newPass2) {
                alert("新密码不一致");
                this.dialogVisible1 = false
                this.updatepasss.oldPass = ""
                this.updatepasss.newPass = ""
                this.newPass2 = ""
                newPass2 = ""
            }
            this.$http.post("/renters/rentersAccount/updatePassword", this.updatepasss).then(resp => {
                alert(resp.data.message)
                this.dialogVisible1 = false
                this.updatepasss.oldPass = ""
                this.updatepasss.newPass = ""
                this.newPass2 = ""
                newPass2 = ""
                this.loadAllRentersinfo()
            })
        },
        showdialog2() {
            this.dialogVisible1 = true
        },
        showdialog() {

            this.dialogVisible = true
        },
        updateuserinfo() {
            this.$http.get("/renters/rentersInfo/updateRentersInfo",
                {
                    params: {
                        rentersinfotel: this.input1,
                    }
                }
            ).then(resp => {
                alert(resp.data.message)
                this.dialogVisible = false
                this.input1 = ""

                this.loadAllRentersinfo()
            })
        },
        loadAllRentersinfo() {
            this.$http.get("/renters/rentersInfo/loadAllRentersInfos",
            ).then(resp => {
                this.page = resp.data.data;
            })
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        afterUpload(response, file, fileList) {
            console.log(response)
        },
        handlePreview(file) {
            console.log(file);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        uploadImage(e) {
            let formData = new FormData()
            formData.append("image", e.file)
            this.$http.post("/renters/rentersInfo/uploadImage", formData, {
                "Content-Type": "multipart/form-data"
            }).then(resp => {
                alert(resp.data.message)
                this.page.rentersInfoImg = resp.data.data
                this.loadAllRentersinfo()
            })
        }
    },
    created() {
        this.loadAllRentersinfo()
    }
}
</script>

<style scoped></style>